import React, { useState, useEffect, useRef, useCallback, forwardRef, useImperativeHandle } from 'react';
import {
  Box,
  Paper,
  Typography,
  Divider,
  IconButton,
  CircularProgress,
  Snackbar,
  Alert,
  Button,
  ButtonGroup,
  Tabs,
  Tab,
  useTheme,
  Tooltip,
  Menu,
  MenuItem,
} from '@mui/material';
import {
  Save,
  FormatAlignJustify,
  Visibility,
  Edit,
  Numbers,
  FormatSize,
  ArrowDropDown,
} from '@mui/icons-material';
import { alpha } from '@mui/material/styles';
import { Editor } from '@tinymce/tinymce-react';
import { useNovel } from '../../context/NovelContext.tsx';
import { SelectedTextInfo, PolishType } from '../../types/text.ts';
import SelectionToolbar from './SelectionToolbar.tsx';
import { preserveTextFormat } from '../../utils/fileSystem/textFormatUtils.ts';
import { subscribeToReplaceTextRequests, ReplaceTextRequest } from '../../services/editorService.ts';

// 创建共享样式常量，用于保持阅读和编辑模式的一致性
const SHARED_STYLES = {
  // 字体和排版
  fontFamily: '"Source Han Serif", "Noto Serif CJK SC", "Songti SC", SimSun, serif',
  fontSize: '1.4rem',
  lineHeight: 1.8,
  color: '#333',
  backgroundColor: '#fcfaf2',

  // 段落样式
  paragraphMargin: '0 0 1em 0',
  paragraphIndent: '2em',

  // 内边距
  contentPadding: '1.5rem',

  // 选中文本样式
  selectionBgColor: 'rgba(66, 133, 244, 0.2)'
};

// 可选的字号大小
const FONT_SIZE_OPTIONS = [
  { value: '1.2rem', label: '小' },
  { value: '1.4rem', label: '中' },
  { value: '1.6rem', label: '大' },
  { value: '1.8rem', label: '特大' },
];

// 格式化文本时使用的样式模板字符串
const FORMAT_PARAGRAPH_STYLE = `margin:${SHARED_STYLES.paragraphMargin};padding:0;text-indent:${SHARED_STYLES.paragraphIndent};line-height:${SHARED_STYLES.lineHeight}`;

// 编辑器内容的自定义CSS
const EDITOR_CUSTOM_CSS = `
body {
  font-family: ${SHARED_STYLES.fontFamily};
  color: ${SHARED_STYLES.color};
  background-color: ${SHARED_STYLES.backgroundColor};
  line-height: ${SHARED_STYLES.lineHeight};
  font-size: inherit;
}

p {
  margin: ${SHARED_STYLES.paragraphMargin};
  text-indent: ${SHARED_STYLES.paragraphIndent};
}

p:empty {
  min-height: 1em;
}

/* 差异标记样式 */
.ai-replaced-text-added {
  background-color: rgba(76, 175, 80, 0.1);
  color: #2E7D32;
  font-weight: 500;
  animation: highlight-fade 3s forwards;
}

.ai-replaced-text-deleted {
  background-color: rgba(244, 67, 54, 0.1);
  text-decoration: line-through;
  color: #E57373;
  animation: highlight-fade 3s forwards;
}

@keyframes highlight-fade {
  0%, 70% { opacity: 1; }
  100% { opacity: 0.3; }
}
`;

interface TextEditorProps {
  onTextSelection?: (selectedText: string, selectionInfo?: SelectedTextInfo) => void;
  onPolishTypeSelect?: (type: PolishType, selectionInfo: SelectedTextInfo) => void;
}

const TextEditor = forwardRef<any, TextEditorProps>(({
  onTextSelection,
  onPolishTypeSelect
}, ref) => {
  const { currentItem, saveContent, loadContent } = useNovel();
  const theme = useTheme();
  const [content, setContent] = useState('');
  const [wordCount, setWordCount] = useState(0);
  const [isSaving, setIsSaving] = useState(false);
  const [isAutoSaving, setIsAutoSaving] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [lastSaved, setLastSaved] = useState<Date | null>(null);
  const [snackbarOpen, setSnackbarOpen] = useState(false);
  const [snackbarMessage, setSnackbarMessage] = useState('');
  const [snackbarSeverity, setSnackbarSeverity] = useState<'success' | 'error' | 'info'>('success');
  const [viewMode, setViewMode] = useState<'edit' | 'read'>('edit');
  const [showLineNumbers, setShowLineNumbers] = useState<boolean>(true);
  const [fontSize, setFontSize] = useState<string>(SHARED_STYLES.fontSize);
  const [fontSizeMenuAnchor, setFontSizeMenuAnchor] = useState<null | HTMLElement>(null);
  const [isButtonHighlighted, setIsButtonHighlighted] = useState(false);
  
  // 选择工具栏相关状态
  const [selectionToolbarOpen, setSelectionToolbarOpen] = useState(false);
  const [selectionToolbarAnchorEl, setSelectionToolbarAnchorEl] = useState<null | HTMLElement>(null);
  const [currentSelectionInfo, setCurrentSelectionInfo] = useState<SelectedTextInfo | null>(null);
  const [lastMouseUpPosition, setLastMouseUpPosition] = useState<{ x: number, y: number } | null>(null);

  const editorRef = useRef<any>(null);
  const lastSaveTimeRef = useRef<number>(0);
  const previewRef = useRef<HTMLDivElement>(null);
  const paperRef = useRef<HTMLDivElement>(null);
  const cursorPositionRef = useRef<{ bookmarks: any } | null>(null);

  // 在组件顶层声明事件处理器引用
  const lastProcessedSelectionRef = useRef<string>('');
  const handlersRef = useRef<{ [key: string]: () => void }>({});

  // 定义handleSave函数，使用useCallback包装以避免不必要的重新创建
  const handleSave = useCallback(async (isAutoSave = false) => {
    if (!currentItem) return;

    // 只有非自动保存时才设置按钮高亮并显示提示
    if (!isAutoSave) {
      // 设置按钮高亮并在短时间后恢复
      setIsButtonHighlighted(true);
      setTimeout(() => setIsButtonHighlighted(false), 500);
    }

    // 保存光标位置和滚动位置
    let editorBookmark = null;
    let scrollPosition = 0;
    let editor = editorRef.current;
    
    if (!editor) {
      console.error('无法保存：编辑器实例不存在');
      return;
    }
    
    try {
      // 保存光标位置
      if (editor.selection) {
        editorBookmark = editor.selection.getBookmark(2, true);
      }
      
      // 保存滚动位置
      const editorBody = editor.getBody();
      if (editorBody) {
        scrollPosition = editorBody.scrollTop;
      }
    } catch (error) {
      console.error('保存光标位置失败:', error);
    }

    // 设置保存状态
    if (isAutoSave) {
      setIsAutoSaving(true);
    } else {
      setIsSaving(true);
    }

    try {
      // 始终从编辑器获取最新内容，不使用React状态中的content
      let contentToSave;
      
      try {
        // 直接从编辑器获取内容
        contentToSave = editor.getContent();
        
        // 更新React状态以保持同步，但不依赖它来保存
        if (contentToSave !== content) {
          console.log('编辑器内容与状态不同，同步状态');
          setContent(contentToSave);
        }
      } catch (e) {
        console.error('获取编辑器内容失败，使用状态内容:', e);
        contentToSave = content; // 回退使用React状态的内容
      }
      
      console.log(`准备${isAutoSave ? '自动' : '手动'}保存内容，长度:`, contentToSave.length);
      
      // 保存内容
      await saveContent(currentItem.id, contentToSave);

      // 记录保存时间 - 使用ref不触发渲染
      lastSaveTimeRef.current = Date.now();
      
      // 无论是自动还是手动保存，都更新UI中显示的最后保存时间
      setLastSaved(new Date());
      
      // 仅在手动保存时显示提示消息
      if (!isAutoSave) {
        const hasFileHandle = currentItem.fileHandle && !currentItem.fileHandle.isDirectory;
        const successMessage = hasFileHandle
          ? '保存成功，已写入文件系统'
          : '保存成功，已保存到应用数据';

        setSnackbarSeverity('success');
        setSnackbarMessage(successMessage);
        setSnackbarOpen(true);
      }
    } catch (error) {
      console.error('保存失败:', error);
      
      // 仅在手动保存失败时显示提示
      if (!isAutoSave) {
        setSnackbarSeverity('error');
        setSnackbarMessage('保存失败，请重试');
        setSnackbarOpen(true);
      }
    } finally {
      // 重置保存状态
      if (isAutoSave) {
        setIsAutoSaving(false);
      } else {
        setIsSaving(false);
      }
      
      // 恢复光标位置和滚动位置
      if (editorBookmark) {
        try {
          setTimeout(() => {
            // 重新获取最新的编辑器引用
            const currentEditor = editorRef.current;
            if (currentEditor && currentEditor.selection) {
              try {
                // 恢复光标位置
                currentEditor.selection.moveToBookmark(editorBookmark);
                
                // 恢复滚动位置
                const editorBody = currentEditor.getBody();
                if (editorBody && scrollPosition > 0) {
                  editorBody.scrollTop = scrollPosition;
                }
                
                // 自动保存后重新聚焦编辑器
                if (isAutoSave && document.activeElement === currentEditor.getBody()) {
                  currentEditor.focus();
                }
                
                console.log(`${isAutoSave ? '自动' : '手动'}保存后，光标位置和滚动位置已恢复`);
              } catch (e) {
                console.error('恢复编辑器状态失败:', e);
              }
            } else {
              console.warn('无法恢复光标位置：编辑器实例或selection对象不可用');
            }
          }, 50);
        } catch (error) {
          console.error('恢复光标位置失败:', error);
        }
      }
    }
  }, [currentItem, saveContent]);

  // 切换行号显示
  const toggleLineNumbers = () => {
    setShowLineNumbers(!showLineNumbers);
  };

  // 当当前项目改变时，加载内容
  useEffect(() => {
    const fetchContent = async () => {
      if (currentItem && currentItem.type === 'chapter') {
        setIsLoading(true);
        try {
          const loadedContent = await loadContent(currentItem.id);
          if (loadedContent !== null) {
            setContent(loadedContent);
          } else {
            setContent('');
          }
        } catch (error) {
          console.error('加载内容失败:', error);
          setSnackbarSeverity('error');
          setSnackbarMessage('加载内容失败，请重试');
          setSnackbarOpen(true);
        } finally {
          setIsLoading(false);
        }
      } else {
        setContent('');
      }
    };

    fetchContent();
  }, [currentItem, loadContent]);

  // 统计字数
  useEffect(() => {
    // 去除空白字符后计算字数
    const trimmedContent = content.replace(/\s+/g, '');
    setWordCount(trimmedContent.length);
  }, [content]);

  // 自动保存
  useEffect(() => {
    const autoSaveInterval = setInterval(() => {
      if (
        currentItem &&
        content &&
        !isSaving && // 确保没有手动保存正在进行
        !isAutoSaving // 确保没有其他自动保存正在进行
      ) {
        console.log('触发自动保存，间隔：1分钟');
        handleSave(true);
      }
    }, 60000); // 直接每分钟自动保存一次
    return () => clearInterval(autoSaveInterval);
  }, [currentItem, content, isSaving, isAutoSaving, handleSave]);

  // 创建选择信息对象，包含源和范围
  const createSelectionInfo = useCallback((selectedText: string, startLine: number, endLine: number): SelectedTextInfo | null => {
    if (!selectedText || selectedText.trim().length === 0) return null;
    if (!currentItem) {
      console.warn('创建选择信息时找不到当前项目');
      return null;
    }
    
    return {
      text: selectedText,
      sourceId: currentItem.id, // 使用ID而不是名称
      startLine,
      endLine,
      // 添加必需属性，以满足类型要求
      startPosition: 0,
      endPosition: selectedText.length,
      timestamp: Date.now(),
      // 简单判断是否为代码（可以根据实际情况增强）
      type: selectedText.includes('{') || selectedText.includes(';') ? 'code' : 'text'
    };
  }, [currentItem]);

  // 添加选择处理的去重逻辑
  const handleSelectionChange = useCallback(() => {
    if (!editorRef.current || !editorRef.current.selection) {
      console.log("编辑器实例或选择对象为空，跳过选择处理");
      return;
    }

    try {
      // 获取选中的文本（先尝试以HTML格式获取，然后转换为纯文本）
      const selectedHtml = editorRef.current.selection.getContent();
      const selectedText = editorRef.current.selection.getContent({ format: 'text' });

      console.log("编辑器中选中的文本:", {
        html: selectedHtml,
        text: selectedText,
        htmlLength: selectedHtml.length,
        textLength: selectedText.length,
        selection: editorRef.current.selection.isCollapsed(),
        range: editorRef.current.selection.getRng()
      });
      
      // 检查是否有选中内容的另一种方法
      const isTextSelected = !editorRef.current.selection.isCollapsed();

      if (!selectedText || selectedText.trim().length === 0) {
        console.log("选中为空，不处理");
        if (isTextSelected) {
          console.log("警告：selection不是collapsed，但获取的文本为空");
        }
        setCurrentSelectionInfo(null);
        return;
      }

      // 手动将HTML转换为纯文本的备用方法
      let backupText = '';
      if (selectedText.trim().length === 0 && selectedHtml.length > 0) {
        // 创建临时元素解析HTML
        const temp = document.createElement('div');
        temp.innerHTML = selectedHtml;
        backupText = temp.textContent || temp.innerText || '';
        console.log("使用备用方法提取的文本:", backupText);

        // 如果备用方法也没提取到文本，则返回
        if (!backupText || backupText.trim().length === 0) {
          setCurrentSelectionInfo(null);
          return;
        }
      }

      // 记录当前处理的选择内容，但不用来跳过处理
      lastProcessedSelectionRef.current = selectedText || backupText;
      
      // 获取选择范围的位置信息
      const selectedRange = editorRef.current.selection.getRng();
      
      // 获取编辑器中的全部文本内容
      const fullContent = editorRef.current.getContent({format: 'text'});
      
      // 尝试确定选择在全文中的绝对位置
      const selectionContent = (selectedText || backupText).trim();
      const startIndex = fullContent.indexOf(selectionContent);
      
      // 如果找到了选中内容在全文中的位置
      let startPosition = startIndex;
      let endPosition = startIndex + selectionContent.length;
      
      // 如果找不到精确匹配，使用当前相对位置的保守估计
      if (startIndex === -1) {
        console.warn('无法精确定位选中文本在全文中的位置，使用估计值');
        // 估算当前光标位置，这种方法不太精确但可作为后备方案
        const bookmark = editorRef.current.selection.getBookmark(2, true);
        startPosition = bookmark.start || 0;
        endPosition = startPosition + selectionContent.length;
      }
      
      // 获取当前选择的行信息
      const startLine = editorRef.current.dom.getPos(selectedRange.startContainer).y;
      const endLine = editorRef.current.dom.getPos(selectedRange.endContainer).y;

      // 创建选择信息
      const selectionInfo = createSelectionInfo(selectedText || backupText, startLine, endLine);
      console.log("创建选择信息:", selectionInfo);

      if (!selectionInfo) {
        console.log("无法创建选择信息");
        return;
      }
      
      // 更新选择信息中的精确位置
      selectionInfo.startPosition = startPosition;
      selectionInfo.endPosition = endPosition;

      // 保存选择信息
      setCurrentSelectionInfo(selectionInfo);
      
      console.log('已更新选择信息：', selectionInfo);
      
      // 将选中的文本和信息传递给父组件
      if (onTextSelection && (selectedText || backupText)) {
        const finalText = selectedText || backupText;
        console.log("调用onTextSelection回调，传递文本长度:", finalText.length);
        onTextSelection(finalText, selectionInfo);
      }

      // 打开工具栏
      const selection = window.getSelection();
      if (selection && !selection.isCollapsed) {
        const range = selection.getRangeAt(0);
        const rect = range.getBoundingClientRect();
      
        // 创建工具栏锚点
        const toolbarAnchor = document.createElement('div');
        toolbarAnchor.style.position = 'absolute';
        toolbarAnchor.style.left = `${rect.left}px`;
        toolbarAnchor.style.top = `${rect.top - 40}px`;
        document.body.appendChild(toolbarAnchor);

        // 设置工具栏位置并显示
        setSelectionToolbarAnchorEl(toolbarAnchor);
        setSelectionToolbarOpen(true);

        // 清理临时元素
        setTimeout(() => {
          if (document.body.contains(toolbarAnchor)) {
            document.body.removeChild(toolbarAnchor);
          }
        }, 100);
      }
    } catch (error) {
      console.error("处理文本选择出错:", error);
    }
  }, [createSelectionInfo, onTextSelection]);

  // 修改TinyMCE的事件监听以避免循环依赖
  useEffect(() => {
    if (!editorRef.current) return;

    console.log("设置TinyMCE编辑器事件监听器");

    const editor = editorRef.current;

    // 创建节流版本的选择检查函数
    let throttleTimer: NodeJS.Timeout | null = null;
    const THROTTLE_DELAY = 300; // 延迟时间，毫秒

    const throttleSelectionCheck = () => {
      if (throttleTimer !== null) {
        return;
      }

      throttleTimer = setTimeout(() => {
        try {
          if (editorRef.current && editorRef.current.selection) {
            // 直接调用handleSelectionChange函数，统一处理选择逻辑
            handleSelectionChange();
          } else {
            console.log("节流检查：编辑器或选择对象无效");
          }
        } catch (error) {
          console.error("节流选择检查出错:", error);
        }

        throttleTimer = null;
      }, THROTTLE_DELAY);
    };

    // 添加各种可能触发选择变化的事件
    const events = ['SelectionChange', 'NodeChange', 'MouseUp', 'KeyUp'];

    events.forEach(event => {
      // 为每个事件创建单独的处理函数并保存到ref中
      if (!handlersRef.current[event]) {
        handlersRef.current[event] = () => {
          throttleSelectionCheck();
        };
      }
      editor.on(event, handlersRef.current[event]);
    });

    // 额外监听浏览器原生的selectionchange事件
    const handleWindowSelectionChange = () => {
      // 确保编辑器处于焦点状态
      if (editorRef.current && 
          editorRef.current.getBody && 
          typeof editorRef.current.getBody === 'function') {
        const editorBody = editorRef.current.getBody();
        if (editorBody && document.activeElement) {
          if (document.activeElement === editorBody || 
              editorBody.contains(document.activeElement)) {
            throttleSelectionCheck();
          }
        }
      }
    };

    document.addEventListener('selectionchange', handleWindowSelectionChange);

    return () => {
      // 清理事件监听器
      if (throttleTimer) {
        clearTimeout(throttleTimer);
      }

      // 安全地从editor实例上移除事件监听器
      const editorInstance = editorRef.current;
      if (editorInstance) {
        events.forEach(event => {
          if (handlersRef.current[event]) {
            try {
              editorInstance.off(event, handlersRef.current[event]);
            } catch (error) {
              console.warn(`无法移除${event}事件监听器:`, error);
            }
          }
        });
      } else {
        console.log("清理时编辑器实例已不存在");
      }

      document.removeEventListener('selectionchange', handleWindowSelectionChange);
    };
  }, [handleSelectionChange]);

  // 添加键盘快捷键支持
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      // Ctrl+E: 选中文本并发送到润色面板
      if (e.ctrlKey && e.key === 'e') {
        e.preventDefault();
        console.log("检测到快捷键 Ctrl+E");
        
        const safeGetSelectedText = () => {
          try {
            // 严格检查编辑器实例和selection对象
            if (!editorRef.current) {
              console.log("safeGetSelectedText: 编辑器实例为空");
              return null;
            }

            if (!editorRef.current.selection) {
              console.log("safeGetSelectedText: 选择对象为空");
              return null;
            }

            // 确保selection.getContent方法存在
            if (typeof editorRef.current.selection.getContent !== 'function') {
              console.log("safeGetSelectedText: getContent方法不存在");
              return null;
            }

            return editorRef.current.selection.getContent({ format: 'text' });
          } catch (error) {
            console.error("获取选中文本出错:", error);
            return null;
          }
        };
        
        const selectedText = safeGetSelectedText();
        console.log("快捷键获取的选中文本:", selectedText);

        if (selectedText && selectedText.trim().length > 0) {
          const selectionInfo = createSelectionInfo(selectedText, 0, 0);
          if (onTextSelection && selectionInfo) {
            console.log("通过快捷键调用onTextSelection");
            onTextSelection(selectedText, selectionInfo);
          }
        } else {
          console.log("没有选中文本，快捷键无效");
        }
      }
      
      // Ctrl+S: 保存当前编辑内容
      if (e.ctrlKey && e.key === 's') {
        e.preventDefault();
        console.log("检测到快捷键 Ctrl+S");
        // 检查是否有可保存的内容和当前项目
        if (currentItem && !isSaving && !isAutoSaving) {
          // 设置按钮高亮
          setIsButtonHighlighted(true);
          setTimeout(() => setIsButtonHighlighted(false), 500);
          handleSave(false);
        }
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, [createSelectionInfo, onTextSelection, currentItem, isSaving, isAutoSaving, handleSave]);

  const handleContentChange = (newContent: string, editor: any) => {
    // 使用传入的editor实例而不是editorRef.current
    const editorInstance = editor || editorRef.current;
    
    // 添加日志输出，帮助调试内容更新问题
    console.log('编辑器内容变更:', {
      contentLength: newContent.length,
      isDifferent: newContent !== content,
      editorInstance: !!editorInstance
    });
    
    // 保存当前光标位置和滚动位置
    let bookmark = null;
    let scrollPosition = 0;

    if (editorInstance && editorInstance.selection) {
      try {
        // 使用更可靠的方式保存光标位置
        bookmark = editorInstance.selection.getBookmark(2, true);
        cursorPositionRef.current = bookmark;

        // 保存当前滚动位置
        const editorBody = editorInstance.getBody();
        if (editorBody) {
          scrollPosition = editorBody.scrollTop;
        }
      } catch (error) {
        console.error("保存光标位置失败:", error);
      }
    }
    
    // 判断内容是否有实质性变化，避免不必要的更新
    if (newContent !== content) {
      console.log('更新编辑器内容状态');
    // 更新内容状态
    setContent(newContent);
    
    // 使用setTimeout让React先完成渲染，然后恢复光标位置
    // 延迟稍微长一点，确保内容完全更新
    setTimeout(() => {
      // 尝试获取最新的editor实例
      const currentEditor = editorRef.current || editorInstance;
        if (currentEditor) {
          // 恢复滚动位置
          const editorBody = currentEditor.getBody();
          if (editorBody && scrollPosition > 0) {
            editorBody.scrollTop = scrollPosition;
          }

          // 恢复光标位置
          if (currentEditor.selection && bookmark) {
        try {
          // 尝试恢复光标位置
              currentEditor.selection.moveToBookmark(bookmark);
          // 确保编辑器获得焦点
          currentEditor.focus();
        } catch (error) {
          console.error("恢复光标位置失败:", error);
              // 失败时不再尝试将光标移动到末尾，可能导致光标跳转
            }
          }
        }
      }, 50);
    }
  };

  // 关闭选择工具栏
  const handleCloseSelectionToolbar = () => {
    setSelectionToolbarOpen(false);
  };

  // 发送到AI
  const handleSendToAI = (info: SelectedTextInfo) => {
    if (onTextSelection) {
      onTextSelection(info.text, info);
      setSelectionToolbarOpen(false);
    }
  };

  // 处理润色类型选择
  const handlePolishTypeSelect = (type: PolishType, info: SelectedTextInfo) => {
    if (onPolishTypeSelect) {
      onPolishTypeSelect(type, info);
      setSelectionToolbarOpen(false);
    }
  };

  // 关闭通知
  const handleCloseSnackbar = () => {
    setSnackbarOpen(false);
  };

  // 模式切换
  const handleModeChange = (_: React.SyntheticEvent, newValue: 'edit' | 'read') => {
    setViewMode(newValue);
  };

  // 插入格式化内容
  const insertFormat = (formatType: string) => {
    // 检查编辑器引用是否可用
        if (!editorRef.current) {
      console.error("编辑器引用不可用");
      setSnackbarMessage("编辑器未就绪，请稍后重试");
      setSnackbarSeverity("error");
      setSnackbarOpen(true);
          return;
        }
        
    // 获取编辑器
    const editor = editorRef.current;

    // 检查是否有选择
    if (!editor.selection) {
      setSnackbarMessage("无法访问选择区域");
      setSnackbarSeverity("error");
      setSnackbarOpen(true);
          return;
        }
        
    // 获取并保存当前滚动位置
    const editorBody = editor.getBody();
    const scrollTop = editorBody ? editorBody.scrollTop : 0;

    // 检查是否选择了内容
    const selectedContent = editor.selection.getContent();
    if (!selectedContent || selectedContent === '') {
      setSnackbarMessage("请先选择文本再执行格式化操作");
      setSnackbarSeverity("error");
      setSnackbarOpen(true);
      return;
    }

    // 保存selection对象，以便后续恢复
    const range = editor.selection.getRng().cloneRange();

    // 开始一个撤销层次
    editor.undoManager.transact(() => {
      try {
        // 使用DOMParser解析HTML
        const parser = new DOMParser();
        const doc = parser.parseFromString(`<div>${selectedContent}</div>`, 'text/html');
        const container = doc.body.firstChild as HTMLElement;

        if (!container) {
          throw new Error("解析内容失败");
        }

        // 查找所有段落和文本节点
        let formattedContent = '';

        // 处理HTML段落
        const paragraphs = container.querySelectorAll('p');

        if (paragraphs.length > 0) {
          // 有HTML段落，处理已有段落元素
          // 1. 移除多余空格
          // 2. 移除段落间距
          const cleanedParagraphs: HTMLParagraphElement[] = [];

          paragraphs.forEach(p => {
            // 获取段落文本并清除首尾空格
            const text = p.textContent ? p.textContent.trim() : '';

            // 忽略空段落
            if (text) {
              // 处理段落内的多余空格：
              // 1. 将连续的多个空格替换为单个空格
              // 2. 清除中文字符和标点符号之间的不必要空格
              const cleanedText = text
                // 先将连续的多个空格替换为单个空格
                .replace(/\s+/g, ' ')
                // 清除中文标点符号前后的空格
                .replace(/ ?([\u3000-\u303F\uFF00-\uFFEF]) ?/g, '$1')
                // 清除中文字符前后的空格
                .replace(/ ?([\u4e00-\u9fa5]) ?/g, '$1')
                // 清除连续两个标点符号之间的空格
                .replace(/(\p{P}) +(\p{P})/gu, '$1$2');

              // 创建新段落元素并设置属性
              const newP = doc.createElement('p');
              newP.textContent = cleanedText; // 使用清理后的文本
              newP.style.margin = SHARED_STYLES.paragraphMargin;
              newP.style.padding = '0';
              newP.style.textIndent = SHARED_STYLES.paragraphIndent;
              newP.style.lineHeight = String(SHARED_STYLES.lineHeight);
              cleanedParagraphs.push(newP);
            }
          });

          // 将所有段落组合成一个字符串 - 不添加任何换行符
          if (cleanedParagraphs.length > 0) {
            const resultDiv = doc.createElement('div');
            cleanedParagraphs.forEach(p => resultDiv.appendChild(p));
            formattedContent = resultDiv.innerHTML;
          }
        } else {
          // 处理纯文本 - 可能包含换行符的内容
          // 分割成行，清除空行和多余空格
          const lines = selectedContent
            .split(/\n+/)
            .map(line => {
              // 清除行首尾空格
              let text = line.trim();
              if (text) {
                // 处理行内的多余空格
                // 1. 将连续的多个空格替换为单个空格
                // 2. 清除中文字符和标点符号之间的不必要空格
                text = text
                  // 先将连续的多个空格替换为单个空格
                  .replace(/\s+/g, ' ')
                  // 清除中文标点符号前后的空格
                  .replace(/ ?([\u3000-\u303F\uFF00-\uFFEF]) ?/g, '$1')
                  // 清除中文字符前后的空格
                  .replace(/ ?([\u4e00-\u9fa5]) ?/g, '$1')
                  // 清除连续两个标点符号之间的空格
                  .replace(/(\p{P}) +(\p{P})/gu, '$1$2');
              }
              return text;
            })
            .filter(line => line);

          if (lines.length > 0) {
            // 处理格式化段落
            const formattedLines: string[] = [];
            for (let i = 0; i < lines.length; i++) {
              // 对每一行添加相同的样式
              formattedLines.push(
                `<p style="${FORMAT_PARAGRAPH_STYLE}">${lines[i]}</p>`
              );
            }

            formattedContent = formattedLines.join('');
          } else {
            // 如果没有有效行，保持原内容
            formattedContent = selectedContent;
          }
        }

        // 仅当内容有变化时更新
        if (formattedContent && formattedContent !== selectedContent) {
          // 恢复原始选择区域
          editor.selection.setRng(range);

          // 使用insertContent命令插入格式化后的内容
          editor.selection.setContent(formattedContent);

          // 设置成功消息
          setSnackbarMessage("格式化完成");
          setSnackbarSeverity("success");
          setSnackbarOpen(true);

          // 确保内容更新完成后，恢复滚动位置并聚焦编辑器
          setTimeout(() => {
            if (editorBody && scrollTop > 0) {
              editorBody.scrollTop = scrollTop;
            }
            editor.focus();
          }, 10);
        } else {
          // 内容无变化
          setSnackbarMessage("内容无需格式化");
          setSnackbarSeverity("info");
          setSnackbarOpen(true);
        }
      } catch (error) {
        console.error("格式化内容时出错:", error);
        setSnackbarMessage("格式化失败，请重试");
        setSnackbarSeverity("error");
        setSnackbarOpen(true);
      }
    });
  };

  // 双击处理
  const handleDoubleClick = () => {
    // TinyMCE已经处理双击选择，无需额外实现
  };

  // 三击处理（选择整段）
  const handleTripleClick = () => {
    // TinyMCE没有内置三击处理，但可以在未来实现
  };

  // 渲染Markdown内容（阅读模式使用）
  const renderMarkdown = (text: string) => {
    if (!text) return '';
    
    // 简单的HTML转换
    let html = text
      // 处理标题
      .replace(/^# (.*?)$/gm, '<h1>$1</h1>')
      .replace(/^## (.*?)$/gm, '<h2>$1</h2>')
      .replace(/^### (.*?)$/gm, '<h3>$1</h3>')
      // 处理引用
      .replace(/^> (.*?)$/gm, '<blockquote>$1</blockquote>')
      // 处理粗体和斜体
      .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
      .replace(/\*(.*?)\*/g, '<em>$1</em>')
      // 处理列表
      .replace(/^- (.*?)$/gm, '<li>$1</li>')
      .replace(/^(\d+)\. (.*?)$/gm, '<li>$2</li>')
      // 处理段落 - 增加样式以保持一致
      .replace(/(?:\r\n|\r|\n){2,}/g, `</p><p style="margin:${SHARED_STYLES.paragraphMargin};text-indent:${SHARED_STYLES.paragraphIndent};line-height:${SHARED_STYLES.lineHeight};display:block;">`)
      // 处理单行换行
      .replace(/(?:\r\n|\r|\n)/g, '<br />');

    // 包装在段落标签中，添加统一样式
    html = `<p style="margin:${SHARED_STYLES.paragraphMargin};text-indent:${SHARED_STYLES.paragraphIndent};line-height:${SHARED_STYLES.lineHeight};display:block;">${html}</p>`;

    // 修正列表项，使其在ul或ol标签中
    html = html.replace(/<li>.*?<\/li>/g, match => {
      return `<ul>${match}</ul>`;
    });

    return html;
  };

  // 处理字号变更
  const handleFontSizeChange = (newSize: string) => {
    setFontSize(newSize);

    // 更新编辑器内容样式
    if (editorRef.current) {
      try {
        const editor = editorRef.current;
        const body = editor.getBody();
        if (body) {
          body.style.fontSize = newSize;
        }
      } catch (error) {
        console.error("更新字号失败:", error);
      }
    }

    // 关闭菜单
    setFontSizeMenuAnchor(null);
  };

  // 打开字号菜单
  const handleFontSizeMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
    setFontSizeMenuAnchor(event.currentTarget);
  };

  // 关闭字号菜单
  const handleFontSizeMenuClose = () => {
    setFontSizeMenuAnchor(null);
  };

  /**
   * 在编辑器中替换选中的文本
   * @param newText 新的文本内容
   * @param options 替换选项
   * @returns 操作是否成功
   */
  const replaceSelectedTextInEditor = useCallback((newText: string, options = {
    formatAsHtml: false,
    preserveFormatting: true,
    triggerChange: true,
    addToHistory: true
  }): boolean => {
    try {
      if (!editorRef.current) {
        console.error('编辑器实例不存在，无法替换文本');
        return false;
      }
      
      const editor = editorRef.current;
      
      // 检查编辑器状态
      if (!editor.selection) {
        console.error('编辑器选择对象不存在');
        return false;
      }
      
      if (editor.selection.isCollapsed()) {
        console.error('编辑器中没有选中的文本');
        return false;
      }
      
      // 确保编辑器处于活动状态
      editor.focus();
      
      // 获取当前选中内容的信息
      const originalContent = editor.selection.getContent();
      const originalText = editor.selection.getContent({ format: 'text' });
      
      console.log('执行替换：', {
        原文: originalText,
        替换为: newText,
        HTML内容: originalContent
      });
      
      // 创建撤销快照并执行替换
      if (options.addToHistory) {
        editor.undoManager.transact(() => {
          // 执行替换
          if (options.formatAsHtml) {
            // 作为HTML内容替换
            editor.selection.setContent(newText);
          } else {
            // 作为纯文本替换，但尝试保留段落格式
            if (options.preserveFormatting) {
              try {
                // 尝试使用格式化API
                const node = editor.selection.getNode();
                const format = editor.formatter.matchAll(['p'])[0];
                
                if (format) {
                  // 应用已有格式
                  editor.selection.setContent(newText);
                  editor.formatter.apply(format);
                } else {
                  // 简单替换
                  editor.selection.setContent(newText);
                }
              } catch (formatError) {
                console.warn('应用格式时出错，执行简单替换:', formatError);
                editor.selection.setContent(newText);
              }
            } else {
              // 简单纯文本替换
              editor.selection.setContent(newText);
            }
          }
        });
      } else {
        // 不记录历史
        editor.selection.setContent(newText);
      }
      
      // 触发内容变更事件
      if (options.triggerChange) {
        editor.fire('change');
      }
      
      console.log('替换完成');
      return true;
    } catch (error) {
      console.error('替换编辑器选中内容时出错：', error);
      return false;
    }
  }, []);

  // 导出组件API
  useImperativeHandle(ref, () => ({
    replaceSelectedText: replaceSelectedTextInEditor
  }), [replaceSelectedTextInEditor]);

  // 订阅全局替换请求
  useEffect(() => {
    // 添加全局替换请求监听
    const unsubscribe = subscribeToReplaceTextRequests((request: ReplaceTextRequest) => {
      console.log('TextEditor收到替换请求:', request);
      // 合并默认选项和传入选项
      const defaultOptions = {
        formatAsHtml: false,
        preserveFormatting: true,
        triggerChange: true,
        addToHistory: true
      };
      const mergedOptions = request.options 
        ? { ...defaultOptions, ...request.options } 
        : defaultOptions;
      
      replaceSelectedTextInEditor(request.newText, mergedOptions);
    });
    
    return () => {
      // 组件卸载时取消订阅
      unsubscribe();
    };
  }, [replaceSelectedTextInEditor]);

  return (
    <Box sx={{
      display: 'flex',
      flexDirection: 'column',
      height: '100%',
      width: '100%',
      p: 0,
      backgroundColor: '#f7f7f7',
      boxSizing: 'border-box',
    }}>
      <Box sx={{
        mb: 2,
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        width: '100%', // 确保标题栏充满宽度
        px: 1
      }}>
        <Typography variant="h5" sx={{ color: '#444', fontWeight: 500 }}>
          {currentItem && currentItem.type === 'chapter' ? currentItem.name : '请选择一个章节'}
        </Typography>
        <Box>
          {lastSaved && (
            <Typography variant="caption" color="text.secondary">
              上次保存: {lastSaved.toLocaleTimeString()}
            </Typography>
          )}
        </Box>
      </Box>

      {/* 工具栏区域 */}
      <Paper
        elevation={1}
        sx={{
          display: 'flex',
          alignItems: 'center',
          p: 0.5,
          pl: 1,
          pb: 0.5,
          height: '48px', // 固定工具栏高度
          borderRadius: 1,
          backgroundColor: theme.palette.mode === 'dark' ? alpha(theme.palette.background.paper, 0.9) : alpha(theme.palette.background.paper, 0.8),
          backdropFilter: 'blur(10px)',
          boxShadow: '0 1px 2px rgba(0,0,0,0.08)',
          mb: 1,
          maxWidth: '1000px',
          width: '100%',
          mx: 'auto'
        }}
      >
        <Tabs
          value={viewMode}
          onChange={handleModeChange}
          sx={{
            minHeight: '36px',
            '.MuiTab-root': { minHeight: '36px', p: '6px 12px' }
          }}
        >
          <Tab
            icon={<Edit fontSize="small" />}
            value="edit"
            aria-label="编辑模式"
            sx={{ minHeight: '36px', p: '6px 12px' }}
          />
          <Tab
            icon={<Visibility fontSize="small" />}
            value="read"
            aria-label="阅读模式"
            sx={{ minHeight: '36px', p: '6px 12px' }}
          />
        </Tabs>

        <Divider orientation="vertical" flexItem sx={{ mx: 1 }} />

        {viewMode === 'edit' ? (
          /* 编辑模式工具栏 */
            <ButtonGroup
              size="small"
              variant="text"
              sx={{
                mr: 1,
                bgcolor: alpha(theme.palette.background.default, 0.4),
                borderRadius: 1,
                p: 0.5,
              height: '40px',
                '& .MuiIconButton-root': {
                  mx: 0.25,
                  borderRadius: 0.75,
                  transition: 'all 0.2s',
                  '&:hover': {
                    bgcolor: alpha(theme.palette.primary.main, 0.1),
                  }
                }
              }}
            >
            <Tooltip title="紧凑段落">
                <IconButton
                  size="small"
                  onClick={() => insertFormat('format-paragraphs')}
                aria-label="紧凑段落"
                  sx={{
                    color: theme.palette.info.dark,
                    position: 'relative',
                  }}
                >
                  <FormatAlignJustify fontSize="small" />
                </IconButton>
              </Tooltip>

            <Divider orientation="vertical" flexItem sx={{ mx: 0.5, my: 0.5 }} />

            {/* 简化的字号选择下拉菜单 */}
            <Tooltip title="调整字号">
                <IconButton
                  size="small"
                aria-label="字号选择"
                onClick={handleFontSizeMenuOpen}
                  sx={{
                  color: theme.palette.info.dark,
                  position: 'relative',
                  }}
                >
                <FormatSize fontSize="small" />
                <ArrowDropDown fontSize="small" sx={{ fontSize: '14px', ml: -0.5 }} />
                </IconButton>
              </Tooltip>

            <Menu
              anchorEl={fontSizeMenuAnchor}
              open={Boolean(fontSizeMenuAnchor)}
              onClose={handleFontSizeMenuClose}
              anchorOrigin={{
                vertical: 'bottom',
                horizontal: 'center',
              }}
              transformOrigin={{
                vertical: 'top',
                horizontal: 'center',
              }}
            >
              {FONT_SIZE_OPTIONS.map((option) => (
                <MenuItem
                  key={option.value}
                  selected={fontSize === option.value}
                  onClick={() => handleFontSizeChange(option.value)}
                  sx={{
                    fontWeight: fontSize === option.value ? 'bold' : 'normal',
                    backgroundColor: fontSize === option.value
                      ? alpha(theme.palette.primary.main, 0.1)
                      : 'transparent',
                    minWidth: '120px',
                  }}
                >
                  {option.label} ({option.value})
                </MenuItem>
              ))}
            </Menu>

              <Divider orientation="vertical" flexItem sx={{ mx: 0.5, my: 0.5 }} />

              <Tooltip title={showLineNumbers ? "隐藏行号" : "显示行号"}>
                <IconButton
                  size="small"
                  onClick={toggleLineNumbers}
                  aria-label={showLineNumbers ? "隐藏行号" : "显示行号"}
                  sx={{
                    color: showLineNumbers ? theme.palette.primary.dark : theme.palette.text.secondary,
                    bgcolor: showLineNumbers ? alpha(theme.palette.primary.light, 0.1) : 'transparent'
                  }}
                >
                  <Numbers fontSize="small" />
                </IconButton>
              </Tooltip>
            </ButtonGroup>
        ) : (
          /* 阅读模式占位区，保持高度一致 */
          <Box
            sx={{
              mr: 1,
              height: '40px',
              minWidth: '140px', // 增加宽度，适应新增的字体大小按钮
              bgcolor: alpha(theme.palette.background.default, 0.4),
              borderRadius: 1,
              p: 0.5,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center'
            }}
          />
        )}

        <Box sx={{ flexGrow: 1 }} />

        {/* 字数统计 */}
        <Typography
          variant="caption"
          component="div"
          sx={{
            color: 'text.secondary',
            mr: 2
          }}
        >
          {wordCount} 字
        </Typography>

        <Tooltip title="保存 (Ctrl+S)">
          <Button
            size="small"
            startIcon={isSaving ? <CircularProgress size={16} color="inherit" /> : <Save />}
            onClick={() => handleSave(false)}
            disabled={!currentItem || isLoading || isSaving || isAutoSaving}
            variant="contained"
            color="primary"
            sx={{ 
              backgroundColor: isButtonHighlighted ? '#7395d9' : isSaving ? '#6b8bc4' : '#4a6da7',
              position: 'relative',
              transition: 'background-color 0.2s ease',
              animation: isSaving ? 'pulse 1s infinite' : isButtonHighlighted ? 'flash 0.5s' : 'none',
              '@keyframes pulse': {
                '0%': { backgroundColor: '#4a6da7' },
                '50%': { backgroundColor: '#6b8bc4' },
                '100%': { backgroundColor: '#4a6da7' }
              },
              '@keyframes flash': {
                '0%': { backgroundColor: '#4a6da7' },
                '50%': { backgroundColor: '#7395d9' },
                '100%': { backgroundColor: '#4a6da7' }
              }
            }}
          >
            保存
          </Button>
        </Tooltip>
      </Paper>

      {/* 编辑器主体 */}
      <Box sx={{
        display: 'flex',
        flexDirection: 'column',
        width: '100%',
        flexGrow: 1,
        alignItems: 'center',
        minHeight: 0,
        overflow: 'hidden'
      }}>
        <Paper
          ref={paperRef}
          elevation={1}
          sx={{
            flexGrow: 1,
            width: '100%',
            height: '100%',
            display: 'flex',
            flexDirection: 'column',
            p: 0,
            overflowY: 'auto',
            backgroundColor: '#fcfaf2',
            boxShadow: '0 4px 6px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.1)',
            borderRadius: '4px',
            maxWidth: '1000px',
            boxSizing: 'border-box',
            border: '1px solid transparent',
            transition: 'border-color 0.3s ease, box-shadow 0.3s ease',
            '&:focus-within': {
              boxShadow: '0 0 0 1px rgba(66, 133, 244, 0.1), 0 4px 8px rgba(0,0,0,0.04)',
              border: '1px solid rgba(66, 133, 244, 0.2)',
            },
            '&::-webkit-scrollbar': {
              width: '8px',
            },
            '&::-webkit-scrollbar-track': {
              background: 'rgba(0,0,0,0.05)',
            },
            '&::-webkit-scrollbar-thumb': {
              background: 'rgba(0,0,0,0.1)',
              borderRadius: '4px',
            },
            '&:hover .line-numbers': {
              opacity: 0.8,
            }
          }}
        >
          {isLoading ? (
            <Box sx={{
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              height: '100%',
              width: '100%'
            }}>
              <CircularProgress />
            </Box>
          ) : viewMode === 'edit' ? (
            // 极简化的TinyMCE编辑器
            <Box sx={{ height: '100%', width: '100%' }}>
              <Editor
                tinymceScriptSrc={`https://cdn.jsdelivr.net/npm/tinymce@6.4.2/tinymce.min.js`}
                init={{
                  height: "100%",
                  language: 'zh_CN',
                  language_url: '/tinymce/langs/zh_CN.js',
                  menubar: false,
                  plugins: [
                    'lists',
                    'link',
                    'image',
                    'searchreplace',
                    'visualblocks',
                    'code',
                    'fullscreen',
                    'table',
                    'wordcount'
                  ],
                  toolbar:
                    'formatselect | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | link image',
                  branding: false,
                  promotion: false,
                  browser_spellcheck: true,
                  contextmenu: false,
                  elementpath: false,
                  resize: false,
                  inline: true,
                  skin: 'oxide',
                  quick_toolbar: false,
                  toolbar_persist: false,
                  toolbar_mode: 'sliding',
                  selection_toolbar: false,
                  insert_toolbar: false,
                  inline_boundaries: false,
                  object_resizing: false,
                  quickbars_selection_toolbar: false,
                  quickbars_insert_toolbar: false,
                  skin_url: '/tinymce/skins/ui/oxide',
                  content_css: '/tinymce/skins/content/default/content.css',
                  base_url: 'https://cdn.jsdelivr.net/npm/tinymce@6.4.2/',
                  content_style: `
                    ${EDITOR_CUSTOM_CSS}
                    body {
                      font-size: ${fontSize};
                      padding: 0;
                      margin: 0;
                      outline: none !important;
                      -webkit-user-select: text;
                      user-select: text;
                    }
                    /* 为编辑区域内容添加内边距 */
                    .mce-content-body {
                      padding: ${SHARED_STYLES.contentPadding};
                      box-sizing: border-box;
                    }
                    /* 确保第一个段落也有适当的顶部距离 */
                    p:first-child {
                      margin-top: 0;
                    }
                    /* 自定义选中文本的样式 */
                    ::selection {
                      background-color: ${SHARED_STYLES.selectionBgColor};
                      color: inherit;
                    }
                    /* 移除TinyMCE默认边框 */
                    .mce-content-body:focus, .mce-content-body:focus-visible {
                      outline: none !important;
                      box-shadow: none !important;
                      border: none !important;
                    }
                    /* 隐藏TinyMCE浮动工具栏 */
                    .tox-toolbar-overlord, 
                    .tox-toolbar__overflow, 
                    .tox-pop, 
                    .tox-collection--toolbar, 
                    .tox-collection--grid,
                    .tox-selected-menu,
                    .tox-tinymce-inline,
                    .tox-editor-header[role="presentation"] + div {
                      display: none !important;
                      visibility: hidden !important;
                      opacity: 0 !important;
                      pointer-events: none !important;
                    }
                  `,
                  setup: (editor) => {
                    console.log("TinyMCE编辑器初始化");
                    
                    // 处理文本格式保留
                    editor.on('BeforeSetContent', (e) => {
                      // 如果输入内容是纯文本（不含HTML标签），处理换行和段落
                      if (e.content && typeof e.content === 'string' && !e.content.includes('<')) {
                        // 将连续的换行符转换为段落
                        e.content = e.content
                          .replace(/\r\n/g, '\n')
                          .replace(/\r/g, '\n')
                          .split(/\n{2,}/)
                          .map(para => `<p>${para.replace(/\n/g, '<br>')}</p>`)
                          .join('');
                      }
                    });
                    
                    // 添加Ctrl+S快捷键支持
                    editor.addShortcut('meta+s', '保存文档', () => {
                      console.log("TinyMCE 触发 Ctrl+S 快捷键");
                      if (currentItem && !isSaving && !isAutoSaving) {
                        // 设置按钮高亮
                        setIsButtonHighlighted(true);
                        setTimeout(() => setIsButtonHighlighted(false), 500);
                        handleSave(false);
                      }
                      return false; // 返回false阻止默认行为
                    });
                  }
                }}
                value={content}
                onEditorChange={(newContent, editor) => handleContentChange(newContent, editor)}
                onInit={(evt, editor) => {
                  // 保存editor引用
                  if (editorRef.current !== editor) {
                    console.log("编辑器实例已更新");
                    
                    // 移除旧实例的事件监听器（如果存在）
                    const oldEditor = editorRef.current;
                    if (oldEditor) {
                      const events = ['SelectionChange', 'NodeChange', 'MouseUp', 'KeyUp'];
                      events.forEach(event => {
                        if (handlersRef.current[event]) {
                          try {
                            oldEditor.off(event, handlersRef.current[event]);
                          } catch (error) {
                            console.warn(`无法从旧编辑器移除${event}事件监听器:`, error);
                          }
                        }
                      });
                    }
                    
                    // 更新引用
                    editorRef.current = editor;
                  }
                }}
                onScriptsLoadError={() => {
                  setSnackbarMessage("TinyMCE脚本加载失败，请刷新页面重试");
                  setSnackbarSeverity("error");
                  setSnackbarOpen(true);
                }}
              />
            </Box>
          ) : (
            // 阅读模式内容 - 使用相同的TinyMCE编辑器但设为只读
            <Box sx={{ height: '100%', width: '100%' }}>
              <Editor
                tinymceScriptSrc={`https://cdn.jsdelivr.net/npm/tinymce@6.4.2/tinymce.min.js`}
                init={{
                height: '100%',
                  menubar: false,
                  plugins: [],
                  toolbar: false,
                  statusbar: false,
                  skin: 'oxide',
                  skin_url: '/tinymce/skins/ui/oxide',
                  content_css: '/tinymce/skins/content/default/content.css',
                  browser_spellcheck: true,
                  contextmenu: false,
                  elementpath: false,
                  branding: false,
                  resize: false,
                  inline: true,
                  quick_toolbar: false,
                  selection_toolbar: false,
                  insert_toolbar: false,
                  inline_boundaries: false,
                  object_resizing: false,
                  quickbars_selection_toolbar: false,
                  quickbars_insert_toolbar: false,
                  readonly: true as any, // 设置为只读模式
                  content_style: `
                    body {
                      font-family: ${SHARED_STYLES.fontFamily};
                      font-size: ${fontSize};
                      line-height: ${SHARED_STYLES.lineHeight};
                      color: ${SHARED_STYLES.color};
                      padding: 0;
                      margin: 0;
                      background-color: ${SHARED_STYLES.backgroundColor};
                      outline: none !important;
                    }
                    /* 为编辑区域内容添加内边距 */
                    .mce-content-body {
                      padding: ${SHARED_STYLES.contentPadding};
                      box-sizing: border-box;
                    }
                    p { 
                      margin: ${SHARED_STYLES.paragraphMargin}; 
                      text-indent: ${SHARED_STYLES.paragraphIndent};
                      line-height: ${SHARED_STYLES.lineHeight};
                    }
                    /* 确保第一个段落也有适当的顶部距离 */
                    p:first-child {
                      margin-top: 0;
                    }
                    /* 自定义选中文本的样式 */
                    ::selection {
                      background-color: ${SHARED_STYLES.selectionBgColor};
                      color: inherit;
                    }
                    /* 移除TinyMCE默认边框 */
                    .mce-content-body:focus, .mce-content-body:focus-visible {
                      outline: none !important;
                      box-shadow: none !important;
                      border: none !important;
                    }
                    /* 隐藏TinyMCE浮动工具栏 */
                    .tox-toolbar-overlord, 
                    .tox-toolbar__overflow, 
                    .tox-pop, 
                    .tox-collection--toolbar, 
                    .tox-collection--grid,
                    .tox-selected-menu,
                    .tox-tinymce-inline,
                    .tox-editor-header[role="presentation"] + div {
                      display: none !important;
                      visibility: hidden !important;
                      opacity: 0 !important;
                      pointer-events: none !important;
                    }
                  `,
                }}
                value={content}
                onInit={(evt, editor) => {
                  // 只读模式不需要保存editor引用
                }}
                onScriptsLoadError={() => {
                  setSnackbarMessage("TinyMCE脚本加载失败，请刷新页面重试");
                  setSnackbarSeverity("error");
                  setSnackbarOpen(true);
                }}
              />
            </Box>
          )}
        </Paper>

        {/* 选择工具栏 */}
        <SelectionToolbar
          open={selectionToolbarOpen}
          anchorEl={selectionToolbarAnchorEl}
          selectionInfo={currentSelectionInfo}
          onClose={handleCloseSelectionToolbar}
          onSendToAI={handleSendToAI}
          onPolishTypeSelect={handlePolishTypeSelect}
          onFormatText={insertFormat}
        />

        {/* 通知提示 */}
        <Snackbar
          open={snackbarOpen}
          autoHideDuration={3000}
          onClose={handleCloseSnackbar}
          message={snackbarMessage}
          anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
        >
          <Alert
            onClose={handleCloseSnackbar}
            severity={snackbarSeverity}
            sx={{ width: '100%' }}
          >
            {snackbarMessage}
          </Alert>
        </Snackbar>
      </Box>
    </Box>
  );
});

export default TextEditor; 